<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四.事件对象</title>
    <style>
        #areaDiv{
        width: 400px;
        height: 200px;
        border: 1px solid black;
        }
        #showMsg{
        width: 400px;
        height: 100px;
        border: 1px solid black;

        }
    </style>
    <script>
        window.onload=function(){
            /* 
                当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标
            */
           //获取两个div
           var areaDiv=document.getElementById("areaDiv");
           var showMsg=document.getElementById("showMsg");
           //鼠标移动事件
           /* 
            onmousemove
            -该事件将会在鼠标在元素中移动时被触发
            事件对象
            -当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
            在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个键快速的按下，鼠标滚轮的方向

           */
          areaDiv.onmousemove=function(event){
            //定义一个形参，就可以使用这个事件对象了  
            //   alert(event);


            /* 
                在IE8中，响应函数被触发时，浏览器不会传递事件对象
                在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
            */

            // if(!event){
            //     event=window.event;
            // }

            //解决事件的兼容性问题
            event=event||window.event;
            /* 
                clientX可以获取鼠标指针的水平坐标 
                clientY可以获取鼠标指针的垂直坐标
            */
           var x=event.clientX;
           var y=event.clientY;
        //    alert("x= "+x + ",y="+y);
           //在showMsg中显示鼠标的坐标   
           showMsg.innerHTML="x= "+x + ",y="+y;

          };
        }
    </script>
</head>
<body>
    <div id="areaDiv"></div>
    <br>
    <div id="showMsg"></div>

</body>
</html>